<template>
  <h1>首页</h1>
</template>

<script setup lang="ts">
// @ts-nocheck
import { ref, onMounted } from 'vue'
import type { EChartsOption } from 'echarts'
import useEcharts from '../../../hook/useEcharts'
import { CalendarHeatmap } from 'vue3-calendar-heatmap'
import { convertData } from '@/utils/map/convert-map-data'
import TagCloud from '@/components/tag-cloud.vue'

import type {
  IDashBoardBottom,
  IDashBoardCenter,
  IDashBoardTop
} from '@/types/common'

const dashBoardTop = ref<IDashBoardTop>()
const dashBoardCenter = ref<IDashBoardCenter>()
const dashBoardBottom = ref<IDashBoardBottom>()
const hotTagNames = ref<string[]>()
const weekVisitCount = ref<{ visits: number[], date: string[] }>({
  visits: [],
  date: []
})
const contributions = ref<{ date: string, count: number }[]>([
  {
    date: '',
    count: 0
  }
])
const ranks = ref<{ title: string[], count:number[] }>({
  title: [],
  count: []
})
const categorys = ref<{ value: number, name: string }[]>([
  {
    value: 0,
    name: ''
  }
])
const userAreas = ref<{ name: string, value: number }[]>([
  {
    name: '',
    value: 0
  }
])

// 1、一周访问量图表
const visitsEChartRef = ref<HTMLElement>()
const visitsWeekCount = (visitsData: { visits: number[], date: string[] }) => {
  const visitsOption: EChartsOption = {
    grid: {
      top: "40px",
      left: "40px",
      right: "0px",
      bottom: "20px"
    },
    legend: {
      data: ['访问量']
    },
    // 鼠标选中数据标签显示
    tooltip: {
      // 触发方式，竖线方式触发
      trigger: 'axis',
      // 触发类型 xy轴线显示
      axisPointer: {
        type: 'cross'
      }
    },
    xAxis: {
      type: 'category',
      data: visitsData.date
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '访问量',
        data: visitsData.visits,
        type: 'line',
        smooth: true
      }
    ]
  }
  useEcharts(visitsEChartRef.value!, visitsOption)
}

// 2、文章浏览排行图表
const articleVisitsEChartRef = ref<HTMLElement>()
const articleVisitsRanks = (ranksData: {title: string[], count: number[]}) => {
  const articleVisitsOption: EChartsOption = {
    grid: {
      top: '50px',
      left: '30px',
      right: '10px',
      bottom: '20px'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['浏览量']
    },
    xAxis: {
      type: 'category',
      data: ranksData.title
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '浏览量',
        data: ranksData.count,
        type: 'bar',

        barWidth: '15%',
        itemStyle: {
          color: '#8A95F2',
          borderRadius: [50, 50, 0, 0]
        },
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)',
          borderRadius: [50, 50, 0, 0]
        },
        showBackground: true,
        realtimeSort: true
      }
    ]
  }
  useEcharts(articleVisitsEChartRef.value!, articleVisitsOption)
}

// 3、文章分类
const articleCategoryEChartRef = ref<HTMLElement>()
const articleCategoryCount = (categoryData: { value: number, name: string }[]) => {
  const articleCategoryOption: EChartsOption = {
    grid: {
      bottom: '100px'
    },
    legend: {
      top: 'bottom'
    },
    tooltip: {
        trigger: 'item',
        formatter: (params: any) => {
            return `${params.marker}${params.data.name}:  ${params.data.value} 篇`
        }
    },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: '60%',
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        data: categoryData
      }
    ]
  };
  useEcharts(articleCategoryEChartRef.value!,articleCategoryOption)
}

// 4、地图
const userType = ref<string>('user')
const mapEChartRef = ref<HTMLElement>()
const userAreaCount = (areasData: { name: string, value: number }[]) => {
  const mapOption: EChartsOption = {
    backgroundColor: '#fff',
    tooltip: {
      trigger: 'item',
      formatter: function (params: any) {
        return params.name + ' : ' + params.value[2]
      }
    },
    visualMap: {
      min: 0,
      max: 200,
      left: 20,
      bottom: 20,
      calculable: true,
      text: ['高', '低'],
      inRange: {
        color: ['rgb(70, 240, 252)', 'rgb(250, 220, 46)', 'rgb(245, 38, 186)']
      },
      textStyle: {
        color: '#fff'
      }
    },
    // geo 地理编码
    geo: {
      map: 'china',
      roam: 'scale',
      emphasis: {
        areaColor: '#f4cccc',
        borderColor: 'rgb(9, 54, 95)',
        itemStyle: {
          areaColor: '#f4cccc'
        }
      }
    },
    series: [
      // 绘制展示数据
      {
        name: '销量',
        type: 'scatter',
        coordinateSystem: 'geo',  // 坐标系统 相对于geo
        data: convertData(areasData),
        symbolSize: 12,
        emphasis: {
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1
          }
        }
      },
      // 绘制地图数据
      {
        type: 'map',
        map: 'china',
        geoIndex: 0,
        aspectScale: 0.75,
        tooltip: {
          show: false
        }
      }
    ]
  }
  useEcharts(mapEChartRef.value!,mapOption)
}

// 贡献图
const mapValues = [
  { date: '2023-5-18', count: 18 },
  { date: '2023-5-17', count: 6 },
  { date: '2023-5-16', count: 4 },
  { date: '2023-5-15', count: 5 },
  { date: '2023-5-11', count: 5 },
  { date: '2023-5-9', count: 2 },
  { date: '2023-5-8', count: 5 },
  { date: '2023-5-7', count: 9 },
  { date: '2023-5-5', count: 5 },
]

onMounted(() => {
  // 防止获取不到DOM放在onMounted周期中执行，！担保一定有值
})

window.sessionStorage.setItem('myInfo', JSON.stringify({
  name: 'coder',
  age: 17
}))

const init = async() => {
  dashBoardTop.value = await (await dashboardTopInfo()).data
  dashBoardCenter.value = await (await dashboardCenterInfo()).data
  dashBoardBottom.value = await (await dashboardBottomInfo()).data
  if (dashBoardTop.value) {
    // 近七日访问量
    weekVisitCount.value!.visits = dashBoardTop.value.weekVisitCount?.map((item) => {
      return item.viewsCount
    })!
    weekVisitCount.value!.date = dashBoardTop.value.weekVisitCount?.map((item) => {
      return item.createTime.split(' ')[0]
    })!
    visitsWeekCount(weekVisitCount.value!)
  }
  if (dashBoardCenter.value) {
    // 排行数据整理
    ranks.value.title = dashBoardCenter.value?.ranks.map((item) => {
      return item.title
    })
    ranks.value.count = dashBoardCenter.value?.ranks.map((item) => {
      return item.count
    })
    articleVisitsRanks(ranks.value)

    // 分类数据整理
    categorys.value = dashBoardCenter.value.categories.map((item) => {
      return {
        value: item.articleCount!,
        name: item.categoryName!
      }
    })
    articleCategoryCount(categorys.value)

    contributions.value = dashBoardCenter.value.contributions.map((item) => {
      return {
        date: item.createTime,
        count: item.count
      }
    })
  }
  // 热门标签整理
  if (dashBoardBottom.value) {
    hotTagNames.value = dashBoardBottom.value.hotTagNames
    userAreas.value = Object.keys(dashBoardBottom.value.areas).map((key) => {
      return {
        name: key.toString(),
        value: parseInt(dashBoardBottom.value!.areas[key.toString()])
      }
    })
    userAreaCount(userAreas.value)
  }
}
init()
</script>

<style scoped lang="less">
// common
.card-title {
  font-size: 15px;
  font-weight: 700;
  color: #333;
}
// common end

// home
.sys {
  width: 100%;
  // cards
  .cards {
    .card-info {
      .header {
        display: flex;
        align-items: center;
        .mask {
          width: 20px;
          height: 20px;
          background-color: #fff;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          i {
            width: 15px;
            height: 15px;
            color: #6067EA;
          }
        }
        .title {
          margin: 0 5px;
          color: #fff;
          font-size: 14px;
        }
      }
      .data {
        width: 100%;
        display: flex;
        justify-content: center;
        margin: 25px 0px 35px 0px;
        .num {
          color: #fff;
          font-weight: 700;
          font-size: 28px;
          letter-spacing: 0.05em;
          .unit {
            font-size: 10px;
          }
        }
      }
      .data-change {
        display: flex;
        justify-content: space-between;
        .yesterday-add, .percent-add {
          display: flex;
          align-items: center;
          color: #fff;
          font-size: 14px;
          i {
            font-size: 20px;
            margin: 0 6px;
          }
        }
      }
    }
  }
  // cards end

  // week-visit
  .week-visit {
    width: 100%;
    margin: 20px 0;
    .title {
      font-size: 13px;
      color: #202a34;
      font-weight: 700;
    }
  }
  // week-visit end

  // heat-map
  .heat-map {
    margin: 20px 0;
  }
  // heat-map end

  // map
  .user-type {
    display: flex;
    justify-content: center;
  }
  // map end

  // tag-cloud
  .tag-cloud {
    width: 100%;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  // tag-cloud end
}
</style>
